<template>
	<AdminLayout activeKey="users" :breadcrumbs="['首页','用户管理','权限设置']" tabTitle="用户管理" currentPage="users-permissions">
		<view class="page">
			<!-- 页面头部 -->
			<view class="page-header">
				<view class="header-info">
					<text class="page-title">权限设置管理</text>
					<text class="page-subtitle">配置用户角色和访问权限</text>
				</view>
				<view class="header-actions">
					<button class="btn-secondary" @click="loadPermissions">
						<text class="btn-icon iconfont icon-shuaxin"></text>
						刷新
					</button>
				</view>
			</view>

			<!-- 统计卡片 -->
			<view class="stats-cards">
				<view class="stat-card">
					<text class="stat-number">{{ stats.totalUsers }}</text>
					<text class="stat-label">总用户数</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.adminUsers }}</text>
					<text class="stat-label">管理员</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.normalUsers }}</text>
					<text class="stat-label">普通用户</text>
				</view>
				<view class="stat-card">
					<text class="stat-number">{{ stats.bannedUsers }}</text>
					<text class="stat-label">禁用用户</text>
				</view>
			</view>

			<!-- 搜索筛选 -->
			<view class="filter-bar">
				<view class="search-box">
					<text class="search-icon iconfont icon-sousuo"></text>
					<input 
						class="search-input" 
						v-model="searchKeyword"
						placeholder="搜索用户名或昵称..."
						@input="onSearchInput" />
				</view>
				<view class="filter-group">
					<text class="filter-label">角色</text>
					<button 
						v-for="role in roleFilters" 
						:key="role.value"
						class="filter-btn"
						:class="{ 'filter-btn-active': currentRole === role.value }"
						@click="filterByRole(role.value)"
					>
						{{ role.label }}
					</button>
				</view>
			</view>

			<!-- 用户权限列表 -->
			<view class="permissions-container">
				<view class="table-header">
					<text class="table-title">用户权限列表</text>
					<text class="table-count">共 {{ filteredUsers.length }} 个用户</text>
				</view>

				<view class="permissions-table">
					<view class="table-row table-header-row">
						<view class="table-cell cell-user">用户信息</view>
						<view class="table-cell cell-role">当前角色</view>
						<view class="table-cell cell-status">账户状态</view>
						<view class="table-cell cell-permissions">权限范围</view>
						<view class="table-cell cell-time">最后登录</view>
						<view class="table-cell cell-actions">操作</view>
					</view>

					<view class="table-row" v-for="user in filteredUsers" :key="user._id">
						<view class="table-cell cell-user">
							<view class="user-info">
								<view class="user-avatar">
									<text class="avatar-text">{{ getAvatarText(user.username) }}</text>
								</view>
								<view class="user-details">
									<text class="username">{{ user.username }}</text>
									<text class="nickname">{{ user.nickname || '未设置昵称' }}</text>
								</view>
							</view>
						</view>
						<view class="table-cell cell-role">
							<view :class="['role-badge', isAdmin(user) ? 'role-admin' : 'role-user']">
								{{ isAdmin(user) ? '管理员' : '普通用户' }}
							</view>
						</view>
						<view class="table-cell cell-status">
							<view :class="['status-badge', user.status === 0 ? 'status-active' : 'status-inactive']">
								<view class="status-dot"></view>
								<text>{{ user.status === 0 ? '正常' : '禁用' }}</text>
							</view>
						</view>
						<view class="table-cell cell-permissions">
							<view class="permission-tags">
								<text class="permission-tag" v-if="isAdmin(user)">全部权限</text>
								<text class="permission-tag" v-else>基础权限</text>
							</view>
						</view>
						<view class="table-cell cell-time">
							<text class="time-text">{{ formatDate(user.last_login_date) }}</text>
						</view>
						<view class="table-cell cell-actions">
							<button class="action-btn btn-edit" @click="editPermission(user)">
								<text class="btn-icon iconfont icon-edit"></text>
							</button>
							<button 
								class="action-btn"
								:class="isAdmin(user) ? 'btn-remove' : 'btn-add'"
								@click="toggleRole(user)"
							>
								<text class="btn-icon iconfont" :class="isAdmin(user) ? 'icon-jianshao' : 'icon-zengjia'"></text>
							</button>
							<button 
								class="action-btn"
								:class="user.status === 0 ? 'btn-disable' : 'btn-enable'"
								@click="toggleStatus(user)"
							>
								<text class="btn-icon iconfont" :class="user.status === 0 ? 'icon-jinzhi' : 'icon-qiyong'"></text>
							</button>
						</view>
					</view>

					<view class="empty-state" v-if="filteredUsers.length === 0">
						<text class="empty-icon">🔐</text>
						<text class="empty-text">暂无用户数据</text>
					</view>
				</view>
			</view>

			<!-- 权限详情对话框 -->
			<view v-if="showDialog" class="modal-overlay" @click="hideDialog">
				<view class="modal-container" @click.stop>
					<view class="modal-header">
						<text class="modal-title">编辑用户权限</text>
						<button class="modal-close" @click="hideDialog">
							<text class="iconfont icon-guanbi"></text>
						</button>
					</view>

					<view class="modal-body">
						<!-- 用户信息 -->
						<view class="user-card">
							<view class="user-avatar-large">
								<text class="avatar-text-large">{{ getAvatarText(selectedUser.username) }}</text>
							</view>
							<view class="user-info-large">
								<text class="username-large">{{ selectedUser.username }}</text>
								<text class="nickname-large">{{ selectedUser.nickname || '未设置昵称' }}</text>
							</view>
						</view>

						<!-- 角色选择 -->
						<view class="form-section">
							<text class="section-title">用户角色</text>
							<view class="role-options">
								<view 
									class="role-option"
									:class="{ active: permissionForm.role === 'user' }"
									@click="permissionForm.role = 'user'"
								>
									<view class="option-icon">👤</view>
									<text class="option-label">普通用户</text>
									<text class="option-desc">基础功能权限</text>
								</view>
								<view 
									class="role-option"
									:class="{ active: permissionForm.role === 'admin' }"
									@click="permissionForm.role = 'admin'"
								>
									<view class="option-icon">👑</view>
									<text class="option-label">管理员</text>
									<text class="option-desc">全部管理权限</text>
								</view>
							</view>
						</view>

						<!-- 账户状态 -->
						<view class="form-section">
							<text class="section-title">账户状态</text>
							<view class="status-options">
								<view 
									class="status-option"
									:class="{ active: permissionForm.status === 0 }"
									@click="permissionForm.status = 0"
								>
									<view class="status-dot-large active"></view>
									<text class="status-label">正常</text>
									<text class="status-desc">可正常使用</text>
								</view>
								<view 
									class="status-option"
									:class="{ active: permissionForm.status === 1 }"
									@click="permissionForm.status = 1"
								>
									<view class="status-dot-large inactive"></view>
									<text class="status-label">禁用</text>
									<text class="status-desc">禁止登录</text>
								</view>
							</view>
						</view>

						<!-- 权限说明 -->
						<view class="permission-info">
							<text class="info-title">权限说明</text>
							<view class="info-list">
								<view class="info-item" v-if="permissionForm.role === 'admin'">
									<text class="info-icon">✓</text>
									<text class="info-text">访问管理后台</text>
								</view>
								<view class="info-item" v-if="permissionForm.role === 'admin'">
									<text class="info-icon">✓</text>
									<text class="info-text">管理用户和内容</text>
								</view>
								<view class="info-item" v-if="permissionForm.role === 'admin'">
									<text class="info-icon">✓</text>
									<text class="info-text">查看数据分析</text>
								</view>
								<view class="info-item" v-if="permissionForm.role === 'user'">
									<text class="info-icon">✓</text>
									<text class="info-text">发布任务和活动</text>
								</view>
								<view class="info-item" v-if="permissionForm.role === 'user'">
									<text class="info-icon">✓</text>
									<text class="info-text">参与圈子互动</text>
								</view>
								<view class="info-item" v-if="permissionForm.status === 1">
									<text class="info-icon error">✗</text>
									<text class="info-text error">禁止登录系统</text>
								</view>
							</view>
						</view>
					</view>

					<view class="modal-footer">
						<button class="btn-cancel" @click="hideDialog">取消</button>
						<button class="btn-submit" @click="savePermission" :disabled="submitting">
							{{ submitting ? '保存中...' : '保存修改' }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'

export default {
	components: { AdminLayout },
	data() {
		return {
			users: [],
			searchKeyword: '',
			currentRole: 'all',
			roleFilters: [
				{ label: '全部', value: 'all' },
				{ label: '管理员', value: 'admin' },
				{ label: '普通用户', value: 'user' }
			],
			stats: {
				totalUsers: 0,
				adminUsers: 0,
				normalUsers: 0,
				bannedUsers: 0
			},
			showDialog: false,
			selectedUser: {},
			permissionForm: {
				role: 'user',
				status: 0
			},
			submitting: false,
			loading: false
		}
	},
	computed: {
		filteredUsers() {
			let result = this.users

			// 角色筛选
			if (this.currentRole === 'admin') {
				result = result.filter(u => this.isAdmin(u))
			} else if (this.currentRole === 'user') {
				result = result.filter(u => !this.isAdmin(u))
			}

			// 搜索筛选
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase()
				result = result.filter(u => 
					(u.username && u.username.toLowerCase().includes(keyword)) ||
					(u.nickname && u.nickname.toLowerCase().includes(keyword))
				)
			}

			return result
		}
	},
	onLoad() {
		this.loadPermissions()
	},
	methods: {
		async loadPermissions() {
			this.loading = true
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'listUsers'
					}
				})
				
				if (res.result && res.result.code === 0) {
					this.users = res.result.data || []
					this.calculateStats()
				} else {
					uni.showToast({ title: res.result?.msg || '获取数据失败', icon: 'none' })
				}
			} catch (e) {
				console.error('获取用户列表失败:', e)
				uni.showToast({ title: '获取数据失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},

		calculateStats() {
			this.stats.totalUsers = this.users.length
			this.stats.adminUsers = this.users.filter(u => this.isAdmin(u)).length
			this.stats.normalUsers = this.users.filter(u => !this.isAdmin(u)).length
			this.stats.bannedUsers = this.users.filter(u => u.status !== 0).length
		},

		filterByRole(role) {
			this.currentRole = role
		},

		onSearchInput(e) {
			// 实时搜索，通过v-model绑定searchKeyword
			// computed属性filteredUsers会自动根据searchKeyword筛选
		},

		editPermission(user) {
			this.selectedUser = user
			this.permissionForm = {
				role: this.isAdmin(user) ? 'admin' : 'user',
				status: user.status || 0
			}
			this.showDialog = true
		},

		hideDialog() {
			this.showDialog = false
			this.selectedUser = {}
			this.permissionForm = {
				role: 'user',
				status: 0
			}
		},

		async savePermission() {
			this.submitting = true
			try {
				const updates = {
					role: [this.permissionForm.role],
					status: this.permissionForm.status
				}

				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'updateUser',
						userId: this.selectedUser._id,
						updates: updates
					}
				})
				
				if (res.result && res.result.code === 0) {
					uni.showToast({ title: '保存成功', icon: 'success' })
					this.hideDialog()
					this.loadPermissions()
				} else {
					uni.showToast({ title: res.result?.msg || '保存失败', icon: 'none' })
				}
			} catch (e) {
				console.error('保存失败:', e)
				uni.showToast({ title: '保存失败', icon: 'none' })
			} finally {
				this.submitting = false
			}
		},

		async toggleRole(user) {
			const isCurrentAdmin = this.isAdmin(user)
			const newRole = isCurrentAdmin ? 'user' : 'admin'
			const actionText = isCurrentAdmin ? '移除管理员权限' : '授予管理员权限'

			uni.showModal({
				title: '权限管理',
				content: `确定要${actionText}吗?`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'updateUser',
									userId: user._id,
									updates: { role: [newRole] }
								}
							})
							
							if (result.result && result.result.code === 0) {
								uni.showToast({ title: '操作成功', icon: 'success' })
								this.loadPermissions()
							} else {
								uni.showToast({ title: result.result?.msg || '操作失败', icon: 'none' })
							}
						} catch (e) {
							console.error('操作失败:', e)
							uni.showToast({ title: '操作失败', icon: 'none' })
						}
					}
				}
			})
		},

		async toggleStatus(user) {
			const newStatus = user.status === 0 ? 1 : 0
			const actionText = newStatus === 0 ? '启用' : '禁用'

			uni.showModal({
				title: '账户状态',
				content: `确定要${actionText}该用户吗?`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const result = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'updateUser',
									userId: user._id,
									updates: { status: newStatus }
								}
							})
							
							if (result.result && result.result.code === 0) {
								uni.showToast({ title: `已${actionText}`, icon: 'success' })
								this.loadPermissions()
							} else {
								uni.showToast({ title: result.result?.msg || '操作失败', icon: 'none' })
							}
						} catch (e) {
							console.error('操作失败:', e)
							uni.showToast({ title: '操作失败', icon: 'none' })
						}
					}
				}
			})
		},

		isAdmin(user) {
			return user.role && Array.isArray(user.role) && user.role.includes('admin')
		},

		formatDate(timestamp) {
			if (!timestamp) return '-'
			const date = new Date(timestamp)
			return date.toLocaleString('zh-CN')
		},

		getAvatarText(username) {
			if (!username) return '?'
			if (/[\u4e00-\u9fa5]/.test(username)) {
				return username.charAt(0)
			}
			return username.substring(0, 2).toUpperCase()
		}
	}
}
</script>

<style scoped>
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	display: block;
	margin-bottom: 8rpx;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	gap: 16rpx;
}

.btn-secondary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
	border-radius: 12rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	transition: all 0.2s ease;
}

.btn-icon.iconfont {
	font-size: 28rpx;
}

.stats-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.stat-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.stat-number {
	font-size: 56rpx;
	font-weight: 700;
	color: #3b82f6;
}

.stat-label {
	font-size: 24rpx;
	color: #64748b;
}

.filter-bar {
	background: #fff;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	display: flex;
	gap: 24rpx;
	align-items: center;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8fafc;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	padding: 12rpx 20rpx;
}

.search-icon {
	font-size: 28rpx;
	color: #64748b;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	border: none;
	background: transparent;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.filter-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 600;
	white-space: nowrap;
}

.filter-btn {
	padding: 12rpx 24rpx;
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #e2e8f0;
	border-radius: 12rpx;
	font-size: 24rpx;
	transition: all 0.2s ease;
}

.filter-btn-active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border-color: #3b82f6;
}

.permissions-container {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	overflow: hidden;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 32rpx;
	background: #f8fafc;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
}

.table-count {
	font-size: 24rpx;
	color: #64748b;
}

.permissions-table {
	width: 100%;
}

.table-row {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1.2fr 1fr 1fr;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom: 2rpx solid #f8fafc;
	transition: all 0.2s ease;
}

.table-row:hover:not(.table-header-row) {
	background: #f8fafc;
}

.table-header-row {
	background: #f8fafc;
	font-weight: 600;
	color: #64748b;
	font-size: 26rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-cell {
	padding: 0 8rpx;
	display: flex;
	align-items: center;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.user-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
}

.avatar-text {
	font-size: 28rpx;
	font-weight: 700;
	color: #fff;
}

.user-details {
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.username {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a202c;
}

.nickname {
	font-size: 22rpx;
	color: #64748b;
}

.role-badge {
	padding: 8rpx 20rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.role-admin {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	color: #2563eb;
	border: 2rpx solid #93c5fd;
}

.role-user {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.status-badge {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.status-active {
	background: #f0fdf4;
	color: #16a34a;
	border: 2rpx solid #bbf7d0;
}

.status-inactive {
	background: #fef2f2;
	color: #dc2626;
	border: 2rpx solid #fecaca;
}

.status-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}

.status-active .status-dot {
	background: #16a34a;
}

.status-inactive .status-dot {
	background: #dc2626;
}

.permission-tags {
	display: flex;
	gap: 8rpx;
}

.permission-tag {
	padding: 6rpx 12rpx;
	background: #fef3c7;
	color: #d97706;
	border-radius: 8rpx;
	font-size: 20rpx;
	font-weight: 600;
}

.time-text {
	font-size: 24rpx;
	color: #64748b;
}

.cell-actions {
	justify-content: center;
	gap: 8rpx;
}

.action-btn {
	width: 56rpx;
	height: 56rpx;
	border-radius: 12rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.action-btn .btn-icon {
	font-size: 24rpx;
}

.btn-edit {
	background: #eff6ff;
	color: #2563eb;
}

.btn-edit:hover {
	background: #dbeafe;
	transform: scale(1.1);
}

.btn-add {
	background: #f0fdf4;
	color: #16a34a;
}

.btn-add:hover {
	background: #dcfce7;
	transform: scale(1.1);
}

.btn-remove {
	background: #fef3c7;
	color: #d97706;
}

.btn-remove:hover {
	background: #fde68a;
	transform: scale(1.1);
}

.btn-disable {
	background: #fef2f2;
	color: #dc2626;
}

.btn-disable:hover {
	background: #fee2e2;
	transform: scale(1.1);
}

.btn-enable {
	background: #f0fdf4;
	color: #16a34a;
}

.btn-enable:hover {
	background: #dcfce7;
	transform: scale(1.1);
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 32rpx;
	gap: 16rpx;
}

.empty-icon {
	font-size: 80rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #94a3b8;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.modal-container {
	width: 90%;
	max-width: 700rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.15);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 700;
}

.modal-close {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.modal-body {
	padding: 32rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.user-card {
	display: flex;
	align-items: center;
	gap: 24rpx;
	padding: 24rpx;
	background: #f8fafc;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
}

.user-avatar-large {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.avatar-text-large {
	font-size: 40rpx;
	font-weight: 700;
	color: #fff;
}

.user-info-large {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.username-large {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a202c;
}

.nickname-large {
	font-size: 24rpx;
	color: #64748b;
}

.form-section {
	margin-bottom: 32rpx;
}

.section-title {
	display: block;
	font-size: 28rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 16rpx;
}

.role-options, .status-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.role-option, .status-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 24rpx;
	background: #f8fafc;
	border: 3rpx solid #e2e8f0;
	border-radius: 16rpx;
	cursor: pointer;
	transition: all 0.2s ease;
}

.role-option.active, .status-option.active {
	background: #eff6ff;
	border-color: #3b82f6;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
}

.option-icon {
	font-size: 48rpx;
}

.option-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a202c;
}

.option-desc {
	font-size: 22rpx;
	color: #64748b;
}

.status-dot-large {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
}

.status-dot-large.active {
	background: #16a34a;
}

.status-dot-large.inactive {
	background: #dc2626;
}

.status-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a202c;
}

.status-desc {
	font-size: 22rpx;
	color: #64748b;
}

.permission-info {
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 24rpx;
	border: 2rpx solid #e2e8f0;
}

.info-title {
	display: block;
	font-size: 26rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 16rpx;
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.info-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.info-icon {
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	font-weight: 700;
	flex-shrink: 0;
}

.info-icon.error {
	background: #dc2626;
}

.info-text {
	font-size: 24rpx;
	color: #475569;
}

.info-text.error {
	color: #dc2626;
	font-weight: 600;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
	padding: 24rpx 32rpx;
	background: #f8fafc;
	border-top: 2rpx solid #e2e8f0;
}

.btn-cancel, .btn-submit {
	padding: 16rpx 32rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
	transition: all 0.2s ease;
}

.btn-cancel {
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.btn-submit {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@media (max-width: 900px) {
	.stats-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.filter-bar {
		flex-direction: column;
		align-items: stretch;
	}
	
	.table-row {
		grid-template-columns: 1fr;
		gap: 16rpx;
	}
	
	.role-options, .status-options {
		grid-template-columns: 1fr;
	}
}
</style>

